<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				ID:<input type="text" disabled v-model="user.id"/>
				姓名:<input type="text"v-model="user.name" />
				年龄:<input type="text" v-model="user.age" />
				性别:<input type="text" v-model="user.sex"/>
				<button @click="updateUser">更新</button>
				<button @click="addUser(user)">增加</button>
				</div>
				<hr>
				<table id = "tab1" border="1px" width="700px" align="center">
					<tr>
						<td colspan="5" align="center">
							<h1>表格数据</h1>
						</td>
					</tr>
					<tr align="center">
						<td>ID</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>操作</td>
					</tr>
					<tr align="center" v-for="item in userList">
						<td v-text="item.id"></td>
						<td v-text="item.name"></td>
						<td v-text="item.age"></td>
						<td v-text="item.sex"></td>
						<td>
							<button @click="updateUserBtn(item)">修改</button>
							<button @click="deleteUser(item.id)">删除</button>
							
						</td>
					</tr>
				</table>	
			</div>
			<script src="../js/axios.js"></script>
			<script src="../js/vue.js"></script>
			<script type="text/javascript">
				axios.defaults.baseURL="http://localhost:8090"
				const app = new Vue({
					el:"#app",
					data:{
						userList:[],
						user:{
							id: "",
							name: "",
							age: "",
							sex: ""
						}
					},
					methods:{
						getUserList(){
							axios.get("/getUser").then(result => {
								this.userList=result.data
							})
						},
						deleteUser(id){
							axios.delete("/user/"+id).then(result => {
								alert(result.data)
								this.getUserList
							})
						},
						updateUserBtn(user){
							this.user=user
						},
						updateUser(){
							axios.put("/updateUser2",this.user).then(result => {
								alert(result.data)
								this.getUserList()
							})
						},
						addUser(user){
							axios.post("/addUser1",this.user).then(result => {
								alert(result.data)
								this.getUserList()
							})
						}
					},
					mounted(){
						this.getUserList()
					}
				
				})
			</script>
	</body>
</html>
